<template>
  <div class="shop">
    <h3>猜你喜欢</h3>
      <div class="guess">
        <span
          v-for="(item, index) in guessArr"
          @click="handleClick(index)"
          :key="index"
          :class="{ active: currentIndex == index }"
          >{{ item }}</span
        >
      </div>
      <div class="chose">
        <div class="box">年货节热卖</div>
        <div class="box">津贴联盟</div>
        <div class="box">满减优惠</div>
        <div class="box">品质联盟</div>
      </div>
      <div class="list">
        <div class="info" v-for="(item, index) in infoArr" :key="index"  @click="toDetail(item)">
          <img :src="item.picUrl" alt="" width="100px" height="100px" />
          <p class="title">{{ item.name }}</p>
          <br />
          <span class="xin">⭐{{ item.wmPoiScore / 10 }}</span>
          <span class="sum">{{ item.monthSalesTip }}</span>
          <br />
          <span class="bot">{{ item.minPriceTip }}</span>
          <span class="far">{{ item.averagePriceTip }}</span>
          <span class="km">{{ item.distance }}</span>
          <span class="min">{{ item.deliveryTimeTip }}</span>
          <br />
          <ul>
            <li v-for="(item, index) in item.discounts2" :key="index">
              {{ item.info }}
            </li>
          </ul>
        </div>
      </div>
  </div>
</template>

<script>
import { shop_list } from "../utils/api";
export default {
    data() {
    return {
      currentIndex: 0,
      guessArr: ["综合排序", "距离最近", "销量最高", "筛选"],
      infoArr: [],
      desArr: [],
    };
  },
  methods: {
    handleClick(index) {
      this.currentIndex = index;
      if (index == 0) {
        return this.infoArr.sort((a, b) => {
          return a.wmPoiScore - b.wmPoiScore;
        });
      }
      if (index == 1) {
        this.infoArr.sort((a, b) => {
          return parseInt(a.distance) - parseInt(b.distance);
        });
      }
      if (index == 2) {
        this.infoArr.sort((a, b) => {
          return (
            b.monthSalesTip.replace(/[^0-9]/gi, "") -
            a.monthSalesTip.replace(/[^0-9]/gi, "")
          );
        });
      }
    },
    toDetail(item){ //跳转到详情页
      this.$router.push('/detail/'+item.mtWmPoiId);
    }
  },
  mounted() {
    shop_list().then((res) => {
      this.infoArr = res.data.list;
    });
  },
}
</script>

<style lang='scss' scoped>
.shop {
    h3 {
      margin: 10px 6px;
    }

    .guess {
      width: 96%;
      margin: auto;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
    }

    .chose {
      width: 96%;
      margin: auto;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
    }

    .chose .box {
      background-color: #f5f5f5;
      padding: 5px 15px;
      font-size: 12px;
      border-radius: 5px;
    }

    .list {
      width: 96%;
      margin: auto;
      margin-top: 20px;
    }

    .info {
      height: 130px;
      margin-bottom: 10px;
    }

    .info img {
      float: left;
    }

    .info .title {
      font-size: 12px;
      font-weight: bold;
      margin-left: 10px;
      display: inline-block;
      margin-bottom: 10px;
    }

    .info .xin {
      color: orange;
      font-size: 10px;
      margin-left: 10px;
    }

    .info .sum {
      color: #999;
      font-size: 10px;
      margin-left: 10px;
    }

    .info .bot {
      color: #999;
      font-size: 10px;
      margin-left: 10px;
    }

    .info .far {
      color: #999;
      font-size: 10px;
      margin-left: 10px;
    }

    .info .min {
      color: #999;
      font-size: 10px;
      float: right;
      margin-top: 4px;
    }

    .info .km {
      color: #999;
      font-size: 10px;
      margin-left: 10px;
      margin-top: 4px;
      float: right;
    }

    .info .pj {
      padding: 2px;
      margin-left: 10px;
      background-color: orange;
      color: orangered;
      font-size: 10px;
    }
    ul {
      list-style: none;
      margin-top: 10px;
      margin-left: 100px;
    }

    li {
      font-size: 12px;
      float: left;
      text-align: center;
      width: 50px;
      height: 20px;
      border: 1px solid red;
      color: red;
      margin-left: 10px;
      margin-bottom: 5px;
      line-height: 20px;
      border-radius: 4px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .active {
      color: red;
    }
  }
</style>